<!DOCTYPE html>
<html style="height: 100%">
<header>
    <meta charset="utf-8">
</header>
 <script src="../lib/ajaxWms.js"></script>
  <script src="date.js"></script>
 <style>

       body { font-family: '宋体', 'Lucida sans', Arial;font-size: 16px;background-color:#4d4d4d;color:#eee  ;overflow: hidden;}
	  .slable{width:70%;float:left;text-align:left ;height:25px}
    .svalue{width:25%;float:left;text-align:left ;height:25px;font-weight:bolder}
		.aaa{width:45%;float:left;padding:10px;height:135px; border:1px solid #666}
		.myselect{float:left;width:50px;height:25px; border:1px solid #666;padding:1px;margin:0 1px}
		.myselectEqu{float:left;width:60px;height:25px; border:1px solid #666;padding:1px;margin:0 1px}
		#txtDt{ }
  </style>
<body style="height: 98%; margin: 0;">

	<div style="border:0px solid #fff;margin:10px">
 <div style="height:250px;width:90%;text-align:center;margin:0 auto">
	<div style="font-size: 50px;"id="detailName">压纹机</div>

	<div class="aaa">
	      <div class="slable">设备OEE（%）:</div>
				<div class="svalue" id="oee" ></div>
				<div class="slable">投入产能(kpcs):</div>
				<div class="svalue" id="i"></div>
				<div class="slable">良品实际产能(kpcs):</div>
				<div class="svalue"  id="o"></div>
				<div class="slable">制损不良:</div>
				<div class="svalue" id="eCount"></div>
	      <div class="slable">制损率:</div>
				<div class="svalue" id="ePer"></div>
		
		</div>
	<div class="aaa">
		
				<div class="slable">设备平均运行速度(pcs/min):</div>
				<div class="svalue" style="color:green" id="avg"></div>
				<div class="slable">设备运行时间:</div>
				<div class="svalue" id="runTime"></div>
				<div class="slable">设备停机时间:</div>
				<div class="svalue"id="stopTime"></div>
				<div class="slable">短停次数:</div>
				<div class="svalue" id="stopShortCount"></div>
	      <div class="slable">合计短停时间:</div>
				<div class="svalue" id="stopShortTime"></div>
		
	</div>
</div>
    <div id="container" ></div> 
    	<div style="width:200px;color:#000;float:left;"  >
     <input id="txtDt" type="text"  onchange="mychange()"/>
   </div>
     <div class="myselect"> <label class="radioLabel" for="line1">1线</label><input id='line1'  value=1 type="radio" name='line' checked onchange="mychange()"/></div>
     <div class="myselect">	<label class="radioLabe1" for="line2">2线</label><input id='line2'  value=2 type="radio" name='line' onchange="mychange()"/></div>
     <div class="myselect">	<label class="radioLabel" for="line3">3线</label><input id='line3'  value=3 type="radio" name='line' onchange="mychange()"/></div>
     <div class="myselect">	<label class="radioLabel" for="line4">4线</label><input id='line4'  value=4 type="radio" name='line' onchange="mychange()"/></div>
     <div class="myselect">	<label class="radioLabel" for="line5">5线</label><input id='line5'  value=5 type="radio" name='line' onchange="mychange()"/></div>
     <div class="myselect">	<label class="radioLabel" for="line6">6线</label><input  id='line6'  value=6 type="radio" name='line' onchange="mychange()"/></div>
     <div class="myselect">	<label class="radioLabel" for="line7">7线</label><input  id='line7'  value=7 type="radio" name='line' onchange="mychange()"/></div>
     
     
     <div class="myselectEqu" style="margin-left:20px"> <label class="radioLabel" for="equp1">制管</label><input id='equp1' checked value=1 type="radio" name='equp' onchange="mychange()"/></div>
     <div class="myselectEqu">	<label class="radioLabe1" for="equp2">压纹</label><input id='equp2'  value=2 type="radio" name='equp' onchange="mychange()"/></div>
     <div class="myselectEqu">	<label class="radioLabel" for="equp3">包装</label><input id='equp3'  value=3 type="radio" name='equp' onchange="mychange()"/></div>
     
     <div class="myselectEqu" style="margin-left:20px"> <label class="radioLabel" for="bc1">白班</label><input id='bc1' checked  value=1 type="radio" name='bc' onchange="mychange()"/></div>
     <div class="myselectEqu">	                         <label class="radioLabe1" for="bc2">晚班</label><input id='bc2'  value=2 type="radio" name='bc' onchange="mychange()"/></div>
     

    </div>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript">
    	
    	 	height=parseInt(window.innerHeight-300-50)
    	
 
        var dom = document.getElementById("container");
        dom.style.height=height+"px"
        var myChart = echarts.init(dom);
        var app = {};
        var option;
     
        var data = [];
      
       
        option = {
            title: {
                text: '当班速度曲线记录',
                 left: 'center',
                 textStyle:{color:"#fff"}
            },
            grid: {
					    left: '3%',
					    right: '4%',
					    bottom: '3%',
					    containLabel: true
					  },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getHours() + ':' + date.getMinutes()  + ':' + date.getSeconds() + '->' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                max:700
            },
            series: [{
                name: '数据',
                type: 'line',
                showSymbol: true,
                hoverAnimation: true,
               lineStyle:{color:"#fff"},
                symbol: 'none',
                sampling: 'lttb',
                data: data
            }]
        };

      

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        
        
        function mychange(){
        	var  l=GetRadioValue("line")
       		var e=GetRadioValue("equp")
       		var bc=GetRadioValue("bc");
       		var rq = document.getElementById("txtDt").value
       		var rqArr=rq.split("/");
       		if(rqArr.length!=3){
       			return false;
       		}
	       	var url="/lm/his/"+rq+"/"+bc+"/"+l+'/'+e
        	
        	document.getElementById("detailName").innerHTML=GetRadioValue("line")+"线"+names[GetRadioValue("equp")]
        	clickAjax(url,function(d){
        		updateEchart(d.data.res)
            
            var stat=d.data.stat[0]
            
            
			      if(!stat){
			      	return;
			      	}
           
            
     	       document.getElementById("o").innerHTML= (stat.kpiGood/1000.0).toFixed(2)
     	       document.getElementById("i").innerHTML=(stat.kpiReal/1000.0).toFixed(2)
     	  
     	       
     	       
     	        var eCount=stat.kpiReal-stat.kpiGood;
     	       document.getElementById("eCount").innerHTML=eCount
     	       document.getElementById("ePer").innerHTML=(100*eCount/stat.kpiReal).toFixed(2)+"%"
     	       var stat=d.data.stat[0]
     	      document.getElementById("runTime").innerHTML=my2sj(stat.runTime)
     	      document.getElementById("avg").innerHTML=(stat.kpiReal/stat.runTime*60).toFixed(1)
            document.getElementById("stopTime").innerHTML=my2sj(stat.stopTime)
            document.getElementById("stopShortCount").innerHTML=stat.stopShortCount
            document.getElementById("stopShortTime").innerHTML=my2sj(stat.stopShortTime)
            document.getElementById("oee").innerHTML=stat.oee
        		
        	})
        	
        	
        	
        	
        	
        	}
        
        var names=["摆箱机",'制管机',"压纹机","包装机"]
        
    
        document.getElementById("detailName").innerHTML=GetRadioValue("line")+"线"+names[GetRadioValue("equp")]
        
     
        
        
        function GetRadioValue(RadioName){
				    var obj =document.getElementsByName(RadioName);
				    if(obj!=null){
				        
				        for(var i=0;i<obj.length;i++){
				            if(obj[i].checked){
				                return obj[i].value;           
				            }
				        }
				    }
				  
				}
        
         
        
       function  updateEchart( arr){
       	    data.length=0;
       			var len  = arr.length
	       		for(var i=0;i<len;i++){
	       			var v=arr[i]
	       			var keyDate=new Date(v.t);
	       			data.push({name:v.t,value:[keyDate,v.v]});
	       		}
          
       			myChart.setOption({
                series: [{
                    data: data
                }]
            });
       	
       	}
     	 
  	function my2sj (data) {
				  if(data==0){
				    return "";
				  }
				  if(data<60){
				    return data+"秒"
				  }
				  var m=myInt(data/60);
				  if(m<60){
				    return m+"分"+(data%60)+"秒"
				  }
				  var h=myInt(m/60);
				  if(h<24){
				    return h+"时"+(m%60)+"分"
				  }
				  var d=myInt(h/24);
				  return d+"天"+(h%60)+"小时";
		}
		function myInt(d){
		    return parseInt(d);
		}
   	pageIndex=3
    </script>
</body>

</html>
 <script src="foot.js"></script>
